import React, { Component } from 'react'
import style from"./index.module.scss"
import { Badge, TabBar } from 'antd-mobile'
import { withRouter } from "react-router-dom";
import {
  AppOutline,
  MessageOutline,
  MessageFill,
  ShopbagOutline,
  UnorderedListOutline,
  UserOutline,
} from 'antd-mobile-icons'
const tabs = [
  {
    key: '/Home',
    title: '首页',
    icon: <AppOutline />,
    badge: Badge.dot,
  },
  {
    key: '/Classify',
    title: '分类',
    icon: <UnorderedListOutline />,
    badge: '5',
  },
  {
    key: '/GoodsAll',
    title: '全部商品',
    icon: (active) =>
      active ? <MessageFill /> : <MessageOutline />
      
  },
  {
    key: '/GoodsCart',
    title: '购物车',
    icon: <ShopbagOutline />
  },
  {
    key: '/PersonalCenter',
    title: '个人中心',
    icon: <UserOutline />,
  },
]
// const 
 class Footer extends Component {
  setRouteActive = (value) => {
    // console.log(this.props);
    this.props.history.push(value)
  }
  render() {
    return (
      <TabBar activeKey={this.props.location.pathname} onChange={value => this.setRouteActive(value)}>
      {tabs.map(item => (
        <TabBar.Item key={item.key} icon={item.icon} title={item.title} />
      ))}
    </TabBar>
    )
  }
}
export default withRouter(Footer)
